import TableRender, { type TableRenderColumnTypes } from '@/render/TableRender'
import type { AnyObject } from '@/types'
import { Component, Emit, Prop, Watch } from 'vue-facing-decorator'
import type { VxeColumnSlotTypes, VxeGridPropTypes, VxeTableDataRow } from 'vxe-table'
import toNative from '@/utils/toNative'
import type { FilterDto } from '@/render/FilterRender'
import style from './period.module.scss'
import { OperationTypeCnEnum, PlanTypeCnEnum } from '@/const/enum'
import { getOperateRecordList } from '@/api/insurance/period'
import Drawer from '@/components/drawer/Index'
import type { OperateRecordDto } from '@/api/insurance/period/types'
import DialogOperateDetail from './DialogOperateDetail'
import { Tag } from 'ant-design-vue'

@Component
export class DialogOperateRecord extends TableRender {
    @Prop() companyId!: number
    @Prop() show!: boolean
    @Prop() companyName!: string

    showDrawer = false
    noTablePadding = true

    showDetail = false
    curRow = {} as OperateRecordDto

    @Emit('update:show')
    updateShow(val: boolean) {
        return val
    }

    @Watch('show', { immediate: true })
    handleWatchShow() {
        this.showDrawer = this.show
        if (this.showDrawer) {
            this.getData()
        }
    }

    @Watch('showDrawer', { immediate: true })
    handleWatchShowDialog() {
        this.updateShow(this.showDrawer)
    }

    filterConfig() {
        return {
            insureDay: {
                name: '生效日期',
                element: 'datetime',
                type: 'daterange',
                params: {
                    valueFormat: 'YYYY-MM-DD'
                }
            }
        } as FilterDto
    }

    tableColumnConfigOld = () => [
        {
            field: 'operationType',
            title: '操作类型',
            width: 120,
            slots: {
                default: ({ row, column }: VxeColumnSlotTypes.ContentSlotParams) => {
                    return (
                        <div class="flex gap-10px">
                            <div>{OperationTypeCnEnum[row.operationType]}</div>
                            <Tag color={`${row.isSuccess ? 'success' : 'warning'}`}>
                                {row.isSuccess ? '成功' : '未成功'}
                            </Tag>
                        </div>
                    )
                }
            }
        },
        {
            field: 'total',
            title: '人数'
        },
        {
            field: 'companyPlanName',
            title: '方案名称'
        },
        {
            field: 'type',
            title: '方案类型',
            formatter: ({ row }) => {
                return PlanTypeCnEnum[row.type]
            },
        },
        {
            field: 'insurStartDate',
            title: '生效时间'
        },
        {
            field: 'createTime',
            title: '录入时间',
            width: 160
        },
        {
            field: 'managerName',
            title: '录入人'
        },
        {
            field: 'msg',
            title: '备注'
        },
        {
            field: 'operate',
            title: '操作',
            fixed: 'right',
            width: 60,
            params: {
                buttons: [
                    {
                        text: '详情',
                        onClick: (row: OperateRecordDto) => this.onShowDialog(row)
                    }
                ]
            },
            slots: {
                default: 'buttons'
            }
        }
    ] as TableRenderColumnTypes<OperateRecordDto>

    async onShowDialog(row: OperateRecordDto) {
        this.curRow = row
        this.showDetail = true
    }

    getData() {
        this.onPage({
            type: 'current',
            currentPage: 1
        })
    }

    onLoadData(page: number, size: number, filters: AnyObject) {
        if (!this.companyId) return []
        filters.beginInsureDay = filters.insureDay?.[0] ?? ''
        filters.endInsureDay = filters.insureDay?.[1] ?? ''
        delete filters.insureDay

        return getOperateRecordList({
            companyId: this.companyId,
            pageNum: page,
            pageSize: size,
            ...filters
        })
    }

    render() {
        return (
            <>
                <Drawer
                    v-model={this.showDrawer}
                    size={900}
                    title="加减保记录"
                    resetStyle={true}
                    showClose
                    v-slots={{
                        default: () => {
                            return <>{super.render()}</>
                        }
                    }}
                ></Drawer>
                <DialogOperateDetail v-model:show={this.showDetail} recordData={this.curRow} />
            </>
        )
    }
}

export default toNative<{ companyId: number }, {}>(DialogOperateRecord)
